<template>
    <div class="addnote">
        <!-- 顶部栏 -->
        <div class="add_header">
            <p class="add_tltle">Days Mastter · 生活</p>
            <p class="add_save iconfont icon-bianji"></p>
        </div>

        <!-- 展示列表 -->
        <div class="showinfo">
            <div class="infolist" v-for="(item,index) in noteArr" :key="index" @click="deleatInfo(item.id)">
                <div class="info_txt">{{item.txt}}</div>
                <div class="info_days">{{item.days}}</div>
                <div class="info_tian">天</div>
            </div>
        </div>

        <!-- 添加记录按钮 -->
        <div class="add_btn">
            <!-- <div class="bg_img"></div> -->
            <div class="btn" @click="addTime">
                <span class="iconfont icon-tianjia"></span>
                <p>记录时间</p>
            </div>
            <van-popup v-model="tiem_show" close-icon-position="top-left" close-icon="exchange" closeable
                position="right" :style="{ height: '100%', width: '100%' }">
                <add-time @item-info="reciv"></add-time>
            </van-popup>
        </div>
    </div>
</template>

<script>
import AddTime from "./AddTime.vue"
import { get } from "@/https/request";
import { Dialog } from 'vant';
export default {
    name: 'AddNote',
    components: {
        AddTime
    },
    data() {
        return {
            // 添加时间弹窗
            tiem_show: false,
            noteArr: []
        }
    },
    props: {
        // 接受父组件传来的书本id
        bookID: {
            tyoe: Number
        }
    },
    methods: {
        addTime() {
            this.tiem_show = true
            // this.$router.push({
            //     path: '/menue/addtime'
            // }).catch(err => { });
        },
        // 接受子组件传来的信息
        reciv(data) {
            console.log(data);
            this.stateInfo(data)
            // console.log(this.noteArr);
            this.tiem_show = false
            this.getInfo()
        },
        // 存储新添加事件
        stateInfo(data) {
            get('http://192.168.35.43:3005/books/set_book_items',
                {
                    txt: data.txt,
                    days: data.days,
                    show_index: data.isShow,
                    book_id: this.bookID,
                    date: data.date
                })
        },
        // 获取事件
        getInfo() {
            get('http://192.168.35.43:3005/books/get_book_items', {
                book_id: this.bookID
            })
                .then(data => {
                    if (data.result.length == 0) {
                        this.noteArr = []
                    } else {
                        let { result } = data
                        this.noteArr = result
                    }
                })
        },
        deleatInfo(id) {
            Dialog.confirm({
                title: '删除',
                message: '真的要删除吗!!!∑(ﾟДﾟノ)ノ',
            })
            .then(() => {
                get(`http://192.168.35.43:3005/books/del_book_items`,{
                    id: id
                })
                this.getInfo()
            })
            .catch(() => {
                console.log('2');
            });
        }
    },
    created() {
        // console.log(this.bookID);
        this.getInfo()
    },
    watch: {
        bookID(newValue, oldValue) {
            console.log(newValue);
            this.bookID = newValue
            this.getInfo()
        }
    },
    updated() {
        this.getInfo()
    }
}
</script>

<style lang="scss" scoped>
@import "@/static//common/base.scss";
@import "@/assets/iconfont/iconfont.css";

.addnote {
    .add_header {
        width: 100%;
        height: 80px;
        background-color: $bgColor;
        display: flex;
        align-items: center;

        .add_tltle {
            color: rgb(255, 255, 255);
            font-weight: 600;
            font-size: 22px;
            margin-left: 50px;
        }

        .add_save {
            color: #fff;
            font-size: 18px;
            width: 40px;
            height: 40px;
            line-height: 40px;
            margin-left: 80px;
        }
    }

    .showinfo {
        padding: 10px;

        .infolist {
            display: flex;
            align-items: center;
            flex-basis: 50% 25% 25%;
            margin: 5px 0;
            height: 40px;

            .info_txt {
                flex-grow: 7;
                height: 100%;
                line-height: 40px;
                padding: 0 10px;
                background-color: rgba(196, 233, 241, 0.648);
                border-radius: 5px 0 0 5px;
                font-size: 20px;
            }

            .info_days {
                width: 80px;
                height: 100%;
                line-height: 40px;
                text-align: center;
                font-size: 22px;
                color: #fff;
                background-color: rgb(108, 180, 235);
            }

            .info_tian {
                height: 100%;
                width: 50px;
                line-height: 40px;
                text-align: center;
                font-size: 22px;
                color: #fff;
                background-color: rgb(0, 140, 255);
                border-radius: 0 5px 5px 0;
            }
        }
    }

    .add_btn {
        .bg_img {
            width: 150px;
            height: 150px;
            background-image: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202004%2F14%2F20200414180001_4TZEa.thumb.400_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668339302&t=a93f0e045339ea86c8cfd379ec37a8be');
            background-size: cover;
            background-position: 0 -30px;
            position: absolute;
            bottom: 50%;
            left: 30%;
        }

        .btn {
            position: absolute;
            bottom: 40%;
            left: 30%;
            display: flex;
            font-size: 18px;
            align-items: center;
            color: rgb(184, 135, 37);
            font-weight: 600;
            width: 150px;
            height: 50px;
            border-radius: 25px;
            background-image: linear-gradient(-225deg, #2CD8D5 0%, #C5C1FF 56%, #FFBAC3 100%);

            .iconfont {
                margin-left: 19px;
            }

            p {
                width: 100%;
                text-align: center;
            }
        }

        .btn:active {
            background-image: linear-gradient(-225deg, #FFE29F 0%, #FFA99F 48%, #FF719A 100%);
        }
    }
}
</style>